<template>
  <div class="container">
    <nav-bar title="项目区域分布情况"></nav-bar>
    <div class="chart-box chart1">
      <div class="chart-box-header">
        <div class="search">
          <pub-area
            :maxSelectLevel="2"
            @change="changeArea"
            customRightIcon
            label=""
            :isLink="false"
            valueIsLast
            ></pub-area>
        <pub-date @sureDate="sureDate"></pub-date>
        </div>
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <van-tabs v-model:active="active" type="card" @change="changeTab">
            <van-tab title="资金支出率">
              <ul class="content-box">
                <li v-for="(item, i) in state.detailData" :key="i">
                  <div class="top-text">
                    <div class="label">{{ item.name }}</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(item.percent)"
                        :decimals="2"
                        :duration="1500"
                      ></count-to>%
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (item.percent / maxNumZCL) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
              </ul>
            </van-tab>
            <van-tab title="下达资金数（万元）">
              <ul class="content-box">
                <li v-for="(item, i) in state.detailData" :key="i">
                  <div class="top-text">
                    <div class="label">{{ item.name }}</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(item.money)"
                        :decimals="2"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (item.money / maxNumXD) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
              </ul>
            </van-tab>
            <van-tab title="项目数（个）">
              <ul class="content-box">
                <li v-for="(item, i) in state.detailData" :key="i">
                  <div class="top-text">
                    <div class="label">{{ item.name }}</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(item.num)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (item.num / maxNumXM) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
              </ul>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import dayjs from "dayjs"
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { ref, reactive, onBeforeMount,onMounted,nextTick } from 'vue'
import { get_fund_area } from '@/api/elderDistribution'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'
const active = ref(0);
const maxNumZCL = ref(0)
const maxNumXD = ref(0)
const maxNumXM = ref(0)
const state = reactive({
  searchParams: {
    areaCode: useUserStore().userLastArea,
    year:dayjs().format('YYYY')
  },
  detailData: []
})

const getElderDetail = async () => {
  let res = await get_fund_area(state.searchParams)
  if (res.succeed) {
    state.detailData = res.data
    let numArr1 = []
    let numArr2 = []
    let numArr3 = []
    res.data.forEach(element => {
      numArr1.push(Number(element.percent))
      numArr2.push(Number(element.money))
      numArr3.push(Number(element.num))
    })
    setTimeout(() => {
      maxNumZCL.value = Math.max.apply(null, numArr1)
      maxNumXD.value = Math.max.apply(null, numArr2)
      maxNumXM.value = Math.max.apply(null, numArr3)
    }, 500)
  }
}

const changeArea = val => {
  state.searchParams.areaCode = val
  getElderDetail()
}
const sureDate = val => {
  state.searchParams.year = val[0]
  getElderDetail()
}

const changeTab = val => {
  console.log('val', val);
  // if (val === 1) {
  //   initChartAge()
  // }
  // if (val === 2) {
  //   nextTick(() => {
  //     initChartTour()
  //   })
  // }
}

onMounted(() => {
  getElderDetail()
})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;

  .chart-box {
    // width: calc(100% - 80px);
    width: 100%;
    font-size: 30px;
    font-family: Microsoft YaHei;
    color: #000000;
    margin-top: 20px;
    background-color: #fff;

    .chart-box-header {
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #E6E6E6;
    }
  }

  .chart1 {
    // height: 440px;
    height: calc(100% - 114px);
    overflow: hidden;
    .chart-box-header {
      justify-content: space-between;
      :deep(.van-cell) {
          width: 220px;
          height: 100%;
        }

        .search {
          display: flex;
          align-items: center;
        }
      .area-detail {
        padding-right: 40px;
        font-weight: 400;
        color: #4375E4;
      }
    }

    .chart-box-content {
      height: 100%;
      margin-top: 30px;
      .bottom-box {
        height: 100%;
        width: 100%;
        display: flex;
        // padding: 0 40px;

        :deep(.van-tabs) {
          height: 100%;
          // padding: 0 40px;
        }

        :deep(.van-tabs__wrap) {
          border-radius: 5px;
          padding: 0 40px;
          margin: 0 0 40px;
        }
        :deep(.van-tabs__nav--card) {
          width: 670px;
          height: 60px;
          background: #E8F2FE;
          border-radius: 5px;
          margin: 0 auto;
        }

        :deep(.van-tab){
          width: 223px;
          padding: 0;

          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #000000;
          }
        }

        :deep(.van-tab--active){
          background: #4375E4;
          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #FFFFFF;
            font-weight: normal;
          }
        }

        :deep(.van-tabs__content){
          height: calc(100% - 200px);
        }
        :deep(.van-tab__panel){
          height: 100%;
        }

        .content-box {
          background-color: #fff;
          padding: 0px 40px;
          overflow: auto;
          height: 100%;
          li {
            margin: 0px 0 40px 0;
            .top-text {
              display: flex;
              justify-content: space-between;
              .label {
                font-size: 30px;
              }
              .value {
                font-size: 30px;
                font-family: Microsoft YaHei;
              }
            }
            .bottom-line {
              margin-top: 20px;
              width: 100%;
              height: 10px;
              border-radius: 5px;
              .inner-line {
                width: 0%;
                transition: 1000ms;
                height: 100%;
                border-radius: 5px;
                background-color: #2588ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
